<template>
    <div style="width: 98%;margin:auto;">
        <div style="padding-bottom:20px;">
            <el-form :inline="true" :mode="searchForm" @submit.native.prevent>
                <div style="display:inline-block;" v-for="(item, index) in searchField" :key="index">
                    <el-form-item :label="item.field_name" >
                       <el-input v-model="searchForm[item.field_name_en]" autocomplete="off" :placeholder="item.placeholder" clearable @keyup.enter.native="searchChange"
                       placeholder="关键字搜索" size="mini" style="width:150px;"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label=" " label-width="8px">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="searchChange">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="tableData" style="max-height:540px;min-height:300px;overflow: hidden;overflow-y: scroll;"
             @row-click="handlerRowClick" highlight-current-row>
                <el-table-column v-for="(item, index) in tableInfo"
                    :prop="item.field_name_en"
                    :label="item.field_name"
                    :key="index"
                    :min-width="handlerWidth(item)"
                    align="center">
                    <template slot-scope="scope">
                    <div v-if="item.form_value === 'textarea'">
                        <div class="flex-center">{{ scope.row[item.field_name_en] }}</div>
                    </div>
                    <div v-else  class="flex-center">
                        {{ scope.row[item.field_name_en] }}
                    </div> 
                    </template>
                </el-table-column>
            </el-table>
            <div style="padding:20px 0;text-align:right;">
                <span style="float:left">共{{ total }}条</span>
                <el-button type="primary" size="mini" style="width:70px;" @click="goSubmit(1)">确认</el-button>
                <el-button type="default" size="mini" style="width:70px;" @click="goCancel">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>

 export default {
    name: 'HelloWorld',
    data() {
        return {
            msg: 'Hello World',
            formLabelWidth: '90px',
            formData:{},
            formFiled: [],
            tabelSelectData:[],
            rowData: null, // 选择行数据
        }
    },
    props: {
        tableData: {
            type: Array,
           default: () => {
                return []
            }
        },
        tableInfo: {
            type: Array,
            default: ()=> {
                return []
            }
        },
        searchField: {
            type: Array,
            default: ()=>{
                return []
            }
        },
        searchForm: {
            type: Object,
            default: ()=>{
                return {}
            }
        },
        total: {
            type: [Number, String],
            default: 0
        }
    },
    mounted(){
       
    },
    methods: {
        goSubmit(index=1){
            if(this.rowData) {
                this.$emit("handlerSubmit", index, this.rowData)
            }else{
                this.$message.warning("请选择数据")
            }
        },
        goCancel(){
            this.$emit("handlerSubmit", 0)
        },
        handlerRowClick(row){
           this.rowData = row || null;
        },
       
        // 搜索
        searchChange(){
            console.log(this.searchForm)
           this.$emit("handlerSearch", this.searchForm)
        }, 
        handlerWidth(item){
         let itemdata =  [
              'input_percentage',
              'tag',
              'textarea',
              'date_picker',
              'date_time_picker',
              'cascader',
              'cascader_radio',
              'cascader_address',
              'input_select'
            ]
          let itemtext = ['item_sn']
          let itemtextarea = ['zhongwenmiaoshu', 'item_depc', ]
          if(itemdata.includes(item.form_value)){
             return '110px'
          }
          if(itemtext.includes(item.field_name_en)){
             return '160px'
          }
          if(itemtextarea.includes(item.field_name_en)){
             return '220px'
          }
          return '90px'
      },
        
    }
 }

</script>
<style scoped>

/deep/ .el-checkbox__inner{
    width:16px;height:16px;
}
/deep/ .el-table tr{
    font-size:12px;
}
.el-form-item{
    margin-bottom:10px!important;
}
/deep/ .current-row{
    background-color: #1890ff!important;
}
/deep/ .current-row td{
    background-color: #1890ff!important;
    color:#fff;
}
/deep/ .el-table--medium .el-table__cell{
    padding: 5px 0!important;
}

</style>